img-comparison-slider

img-comparison-slider

Slider component for comparing images (before and after).

Usage examples: https://sneas.github.io/img-comparison-slider

Key Features

• Mobile friendly
• Accessible
• Responsive
• Compact - less than 9 kB minified (Or less than 3 kB when gzipped)
• Compatible with modern frameworks (React, Angular, Vue2, Vue3)
• Distributed through CDN or NPM

Installation

HTML

<script
  defer
  src="https://unpkg.com/img-comparison-slider@6/dist/index.js"
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/img-comparison-slider@6/dist/styles.css"
/>

<img-comparison-slider>
  <img slot="first" src="before.jpg" />
  <img slot="second" src="after.jpg" />
</img-comparison-slider>

Frameworks Support

• React
• Angular
• Vue2
• Vue3

Styling

Some styling techniques and ideas could be found in the demo.

The component items such as the default handle or divider could be styled with the help of CSS3 variables.

Example:

<style type="text/css">
  img-comparison-slider {
    --divider-width: 2px;
    --divider-color: #c0c0c0;
    --default-handle-opacity: 0.3;
  }
</style>

Available variables

Variable	Description	Default value
--divider-width	Width of the vertical line dividing both images	1px
--divider-color	Color of the vertical line dividing both images	#fff
--default-handle-width	Width of the default handle	50px
--default-handle-color	Color of the default handle	#fff
--default-handle-opacity	Opacity of the default handle	1

Handle

The component's handle could be changed by assigning slot="handle" attribute to any element inside img-comparison-slider.